<template>
  <div>
    <el-form ref="EditForm" :model="EditForm" label-width="80px" style="width:84%;" status-icon>
      <el-form-item label="昵称">
        <el-input v-model="EditForm.userName" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="登录">
        <el-input v-model.number="EditForm.login"></el-input>
      </el-form-item>
      <el-form-item label="帖子">
        <el-input v-model.number="EditForm.post"></el-input>
      </el-form-item>

      <el-form-item label="评论">
        <el-input v-model.number="EditForm.comment"></el-input>
      </el-form-item>

      <el-form-item label="点赞">
        <el-input v-model.number="EditForm.parise"></el-input>
      </el-form-item>
    </el-form>
    <!--按钮-->
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="edit()">保存</el-button>
      <el-button @click="reset()">重置</el-button>
    </span>
  </div>
</template>
<script>
export default {
  props: ['scope'],
  data() {
    return {
      EditForm: {
        userName: '',
        login: '',
        post: '',
        comment: '',
        parise: ''
      }
    }
  },
  created() {
    this.comm.assignmentObject(this.scope, this.EditForm)
  },
  methods: {
    // 保存
    async edit() {
      // console.log(this.EditForm)
      // console.log(this.scope)
      var d
      await this.compareObject(this.scope, this.EditForm).then(async data => {
        console.log(data)
        if (JSON.stringify(data) === '{}') {
          return (d = 1)
        }
        this.comm.editinteg(this.scope.userName, data, this)
      })
      if (d) {
        return
      }
      this.$router.go(0)
    },
    // 比较两个对象属性值的不同并返回不同的属性
    async compareObject(obj1, obj2) {
      // var objName1 = Object.getOwnPropertyNames(obj1)
      var objName2 = Object.getOwnPropertyNames(obj2)
      var newObj = {}
      await objName2.forEach(item => {
        if (obj1[item] !== obj2[item]) {
          newObj[item] = obj2[item]
        }
      })
      return newObj
    },
    // 重置
    reset() {
      this.$refs.EditForm.resetFields()
    }
  }
}
</script>
<style lang="less" scoped>
.dialog-footer {
  display: flex;
  justify-items: center;
  .el-button {
    margin: 0 auto 10px;
  }
}
</style>
